@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,400;0,700;1,400&display=swap');

*{
	margin: 0;
	padding: 0;
	
}
body{
	font-family: Titillium Web;

}


/*-------------------------Header-------------------------------*/
.header-wraper{
	height: 100vh;
	background-color: #87509c;
}
.header, .services, .team, .skills, .portfolio, .feedback, .contact{
	width: 76%;
	max-width: 1100px;
	height: 100vh;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	overflow: hidden;
}
.header-top{
	/*padding-top: 60px;*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: start;
}
.header-link{
	padding: 10px 20px;
	color: #fff;
	font-size: 16px;
	border-radius: 3px;
	transition: 0.2s;
	text-decoration: none;
}
.header-link:hover{
	background-color: #643a79;
}
.header-title{
	color: #fff;
	text-align: center;
	/*margin: 150px 0;*/
	font-size: 42px;
	font-weight: bold;
	align-self: center;
}
.header-button-wraper{
	margin: 0 auto;
	width: 27%;
}
.header-button{
	color: #fff;
	display: block;
	padding: 30px 20px;
	transition: 0.2s;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
	background-color: #eb7d4b;
	border-bottom: 6px solid #c86a40;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.header-button:hover{
	background-color: #c86a40;
	border-radius: 0;
}



/*--------------------------------content---------------------------------*/
.services-wraper{
	background-color: #17c2a4;
	height: 100vh;
	overflow: hidden;
}
.services{
	/*padding-top: 120px;*/
	color: #fff;
}
.services-title{
	text-align: center;
	font-size: 40px;
	font-weight: bold;
}
.services-title::after{
	content: "";
	display: block;
	margin: 0 auto; 
	width: 1.8em;
	border-bottom: 3px solid #14a58c;
}
.services-subtitle{
	text-align: center;
	margin-top: 25px;
}
.cards{
	display: flex;
	margin-bottom: 2%;
	/*margin-top: 80px;*/
}
.card{
	cursor: pointer;
}
.card > img{
	margin: 0 50%;
	transform: translateX(-50%);
	transition: 1.5s;
}
.card:hover > img{
	width: 40%;
}
.card:hover > #bag{
	width: 50%;
}
.card-title{
	margin-top: 60px;
	text-align: center;
	font-weight: bold;
}
.card-description{
	margin-top: 30px;
	text-align: center;
}


/*------------------------------------TEAM-------------------------------------*/
.team-wraper{
	color: #3c4761;
	background-color: #e7f1f8;
	height: 100vh;
}
.team-title, .team-subtitle, .team-card-title, .team-card-skils, .team-card-subtitle{
	text-align: center;
}
.team-title{
	font-size: 42px;
	font-weight: bold;
}
.team-title::after{
	content: "";
	display: block;
	margin: 0 auto; 
	width: 1.8em;
	border-bottom: 3px solid #c8d9e5;
}
.team-subtitle{
	font-size: 19px;
	font-weight: 400;
}
.team-cards{
	display: flex;
}
.team-card{
	cursor: pointer;
}
.team-card:hover > .team-card-title{
	color: #27283d;
}
/*.team-card:hover > img{
	width: 75%;*/
/*}*/
.team-card > img{
	border-radius: 50%;
	margin-left: 50%;
	transform: translateX(-50%);
}
.team-card-title{
	margin-top: 40px;
	font-size: 24px;
	font-weight: bold;
}
.team-card-skils{
	font-size: 16px;
	color: #30bae7;
}
.team-card-subtitle{
	margin-top: 30px;
	margin: 0 10px;
}
.team-card-contact{
	margin-top: 30px;
	/*transform: translateX(-50%);*/
	text-align: center;
}

/*-----------------------------SKILLS-------------------------------*/
.skills-wraper{
	height: 100vh;
}
.skills{
	color: #3c4761;

}
.skills-subtitle, .skills-title, .skill-discription{
	text-align: center;
}
.skills-title{
	font-size: 40px;
	font-weight: bold;
}
.skills-title::after{
		content: "";
	display: block;
	margin: 0 auto; 
	width: 1.8em;
	border-bottom: 3px solid #dfe8ed;
}
.skills-subtitle{
	font-size: 18px;
}
.skills-progressBars{
	display: flex;
	justify-content: space-around;
}
.skill{
	position: relative;
}
.progressImg{
	/*width: 60%;*/
	margin: 0 50%;
	transform: translateX(-50%);
	/*display: none;*/
}
.skill-percent{
	font-size: 48px;
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 25%);
}
.skill-discription{
	font-size: 24px;
	font-weight: bold;
}


/*----------------------------PORTFOLIO---------------------------------*/
.portfolio-wraper{
	background-color: #ffdd99;
}
.portfolio{
	height: 150vh;
}
.portfolio-title, .portfolio-subtitle, .work-discription{
	text-align: center;
}
.portfolio-title::after{
	content: "";
	display: block;
	margin: 0 auto; 
	width: 1.8em;
	border-bottom: 3px solid #e5c37f;
}
.portfolio-FILTERbuttons{
	margin: 0 auto;
}
.portfolio-FILTERbutton{
	padding: 5px 15px;
	color: #000;
	text-decoration: none;
	background-color: #ebc985;
	border-radius: 2px;
	transition: 0.2s;
}
.portfolio-FILTERbutton:hover{
	background-color: #fff;
}
.works{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
}
.work{
	
}
.work-img{

	width: 90%;
	transition: 0.5s;
	cursor: pointer;
}
.work-img:hover{
	width: 95%;
}
.work-discription{
	font-size: 18px;
}
.portfolio-load-more{
	text-align: center;
	display: block;
	width: 27%;
	margin: 0 auto;
}
.portfolio-load-more{
	color: #fff;
	padding: 10px 60px;
	background-color: #17c2a4;
	text-decoration: none;
	border-bottom: 4px solid #14a58c;
	border-radius: 0 0 2px 2px; 
}
.portfolio-load-more:hover{
	background-color: #14a58c;
}


/*-------------------------------------FEEDBACK----------------------------*/
.feedback-wraper{
	height: 100vh;
	background-color: #d74680;
}
.feedback{
	color: #fff;
}
.feedback-title, .feedback-subtitle{
	text-align: center;
} 
.feedback-title{
	font-size: 40px;
	font-weight: bold;
}
.feedback-title::after{
	content: "";
	display: block;
	margin: 0 auto; 
	width: 1.8em;
	border-bottom: 3px solid #b73c6d;
}
.feedback-subtitle{
	font-size: 18px;
}
.comments{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}
.coment{
	display: flex;
	align-items: center;
}
.comment-ava{
	width: 20%;
	border-radius: 50%;
}
.comment-content{
	margin: 20px;
}
.comment-text{
	font-size: 18px;
	/*font-weight: 400;*/
	font-style: italic;
}
.comment-name{
	margin-top: 30px;
	display: block;
	font-size: 24px;
	font-weight: bold;
}
.user-post{
	color: #fac996;
	display: block;
	font-size: 18px;

}


/*-------------------------------------CONTACT------------------------------*/
.contact-wraper{
	background-color: #3c5499;
	height: 90vh;
}
.contact{
	color: #fff;
}
.contact-title, .contact-subtitle{
	text-align: center;
}
.form-flex{
	font-size: 18px;
	display: flex;
	flex-direction: column;
}
#contact-name, #contact-email, #contact-message{
	display: none;
	position: absolute;
}
#contact-name{
	left: 13%;
}
#contact-email{
	right: 50%;
	transform: translateX(110%);
}
#contact-message{
	top:50%;
}
.input-wraper{
	margin: 20px 0;
	display: flex;
	justify-content: space-around;
}
input{
	color: #fff;
	padding: 20px;
	margin: 0 5px;
	width: 100%;
	background-color: #273a71;
	border: 2px solid #3c5499;
	border-radius: 2px; 
}
input:focus{
	outline: none;
	-moz-appearance: none;
	border: 2px solid #5072d4;
}
textarea{
	/*width: 100%;*/
	color: #fff;
	padding: 25px;
	background-color: #273a71;
	border: 2px solid #3c5499;
	border-radius: 2px;
}
textarea:focus{
	outline: none;
	-moz-appearance: none;
	border: 2px solid #5072d4;
}
form > button{
	color: #fff;
	background-color: #30bae7;
	padding: 20px 0;
	margin: 4% 50% 10%;
	transform: translateX(-50%);
	width: 25%;
	border: none;
	border-radius: 0 0 3px 3px;
	border-bottom: 4px solid #299ec5;
	font-size: 18px;
	cursor: pointer;
}
form > button:hover{
	background-color: #299ec5;
}
form > button:focus{
	background-color: #1085ac;
	outline: none;
	-moz-appearance: none;
}




/*---------------------------------------------------FOOTER------------------------------------------------*/

.footer-wraper{
	width: 100%;
	height: 10vh;
	background-color: #344b8e;
}
.footer{
	width: 56%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.footer-links{
	color: #fff;
	text-decoration: none;
}
.footer-links:hover{
	color: #30bae7;
}